<ui:composition template="templateProveedor.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
	</h:head>
	
	<ui:define name="cdListar">
		
	<div class="well">	
		<!-- <h:form id="form" class="panel panel-primary"> -->
		
		

		
		
		
		
		
		
		
		
		<a href="cdRegistro.xhtml" style="float:right;"><button class="btn btn-primary"><span class="glyphicon glyphicon-plus ">  </span>  Nuevo </button></a>
		
		<h:form id="form">
	        
	        <legend>Contenidos Digitales </legend>

		    <p:growl id="messages" showDetail="true" />
		    
		    <p:dataTable id="dataTable" var="contenido" value="#{contenidoDigitalBean.contenidosProveedor}" editable="true" resizableColumns="true" colums="6"  styleClass="table table-hover table-responsive" >

		        <f:facet name="header" styleClass="table-header">Contenidos Digitales</f:facet>

		        <p:ajax event="rowEdit" listener="#{contenidoDigitalBean.onEditCD}" update=":form:messages" />  
		        <p:ajax event="rowEditCancel" listener="#{contenidoDigitalBean.onCancelCD}" update=":form:messages" />
		        		        
				<p:column>
					<p:graphicImage id="NombreId" value="/Imagenes/#{contenido.nombre}.jpg">
			            <f:param name="id" value="#{contenido.nombre}" />
					</p:graphicImage>
     			</p:column>
        										        		        
		        <p:column style="text-align:center; width:auto;" headerText="Nombre">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{contenido.nombre}" />
		                </f:facet>
		                <f:facet name="input">
		                    <h:inputText value="#{contenido.nombre}" itemValue="#{contenido.nombre}" var="#{contenido.nombre}" style="width:100%"/>
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Descripcion">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{contenido.descripcion}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{contenido.descripcion}" itemValue="#{contenido.descripcion}" var="#{contenido.descripcion}" style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>		            
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Categoria">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{contenido.subcategoria.categoria.nombre}" />  
		                </f:facet>
		                <f:facet name="input">  
		                    <h:outputText value="#{contenido.subcategoria.categoria.nombre}" />  
		                </f:facet>
					</p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Subcategoria">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{contenido.subcategoria.nombre}" />  
		                </f:facet>
		                <f:facet name="input">
		    				<p:selectOneMenu styleClass="dropdown" id="subcategoria" value="#{contenido.subcategoria.nombre}" effect="fade" >
					            <f:selectItems value="#{contenidoDigitalBean.subcategorias}" var="subcategoria" itemLabel="#{subcategoria.nombre}" itemValue="#{subcategoria.nombre}"/>
					        </p:selectOneMenu>
		                </f:facet>
		            </p:cellEditor>
		        </p:column>

		        <p:column style="text-align:center; width:auto;" headerText="ver">
	               <p:commandButton actionListener="#{contenidoDigitalBean.verContenido(contenido.idContenido)}" value="VER" />
		        </p:column>
				
		        <p:column style="text-align:center; width:auto;">  
		            <p:rowEditor />  
		        </p:column> 

				<p:column style="text-align:center; width:auto;"> 
			  		<p:growl id="eliminar" showDetail="true" />
				    <p:commandButton update="dataTable,eliminar" icon="ui-icon-trash" actionListener="#{contenidoDigitalBean.postEliminarCD(contenido.idContenido)}">
				        <p:confirm header="Confirmacion" message="¿Seguro que desea eliminar el contenido digital?" icon="ui-icon-alert"/>					          
				    </p:commandButton>					  
				    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
				    </p:confirmDialog>
				</p:column>
		    </p:dataTable>
			<p:resizable for="dataTable" aspectRatio="true"/>
		
		    <p:blockUI block="dataTable" trigger="dataTable">LOADING<br />
		        
		    </p:blockUI>		
		</h:form>
		 </div>
		 
		<!-- <div class="table-responsive" > -->
		

							<link href='../css/item.css' rel='stylesheet' type='text/css'></link>	
<!-- 							<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'></link> -->
							<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> -->						
									
		
<!-- <div class="wrapper table table-hover panel panel-default"> -->			
	
	<!-- Lo use para probar la tabla de primefaces -->
	<style>
.ui-datagrid-content {
	border: none;
}
/* No se porque pero esto me deja que los items se alinen */
.ui-datagrid-column {
	/* background-color: transparent; */
	float: left;
	padding-left: 60px;
}

.ui-widget-content {
	border: 0px;
	padding: 10px;
	background-color: transparent;
}
/* .ui-datagrid{
background-color: transparent;
} */
</style>
			<div class="row col-xs-6 col-md-3">
			    
			    <p:dataGrid id="grid" var="cd" value="#{contenidoDigitalBean.contenidosProveedor}" resizableColumns="true" columns="18">

					<div class="media">
					  <a class="pull-left" href="#">
						<p:graphicImage id="NombreId" value="/Imagenes/#{cd.nombre}.jpg" 
										style="width: 100px; height: 100px; border: 4px solid white;" 
										styleClass="media-object" />						
					  </a>
					  <div class="media-body">
					    <h4 class="media-heading"><h:outputText value="#{cd.nombre}"/></h4>
						<div class="item-top-title">														
							<h:outputText value="#{cd.descripcion}" styleClass="subdescription"/>															
						</div>
					  </div>
					</div>
		
			    </p:dataGrid>
			   	<p:resizable for="grid" aspectRatio="true"/>
			</div>
<!-- </div>			 -->
			
												
						<script src="../js/item.js"></script>
						

		<!-- </div> -->
		<!-- <iframe width="440" height="260" src="item.html" scrolling="no" frameborder="no" ></iframe> -->		

		 
	</ui:define>
</ui:composition>

